<template>
  <view class="container">
    <view class="login-from">
      <!--账号-->
      <view :class="code=='500'?'error_wrap_red':'error_wrap'">{{error}}</view>
      <view class="inputView">
        <image class="nameImage" src="/static/login_name.png" />
        <label class="loginLab" for="account">账号</label>
        <input
          name="username"
          class="inputText"
          placeholder="请输入用户名"
          @blur="usernameBlur"
          @input="inputUsername"
        />
      </view>

      <!--账号-->
      <view class="inputView">
        <image class="nameImage" src="/static/login_name.png" />
        <label class="loginLab" for="account">昵称</label>
        <input
          name="nickName"
          class="inputText"
          placeholder="请输入昵称"
          focus="true"
          @input="inputNickName"
        />
      </view>

      <!--密码-->
      <view class="inputView">
        <image class="keyImage" src="/static/login_pwd.png" />
        <label class="loginLab" for="pwd">密码</label>
        <input
          name="password"
          class="inputText"
          password="true"
          placeholder="请输入密码"
          @input="inputPassword"
        />
      </view>

      <!--密码-->
      <view class="inputView">
        <image class="keyImage" src="/static/login_pwd.png" />
        <label class="loginLab" for="pwd">密码</label>
        <input
          name="password2"
          class="inputText"
          password="true"
          placeholder="请再次输入密码"
          @input="inputPassword2"
          @blur="passwordBlur"
        />
      </view>

      <!--按钮-->
      <view class="loginBtnView">
        <button class="loginBtn" type="primary" @click="clickRegister">注册</button>
      </view>
    </view>
  </view>
</template>

<script>
import md5Libs from "uview-ui/libs/function/md5";
export default {
  data() {
    return {
      flag1: false,
      flag2: false,
      error: "",
      code: 0,
      username: "",
      password: "",
      password2: "",
      nickName: ""
    };
  },
  methods: {
    inputUsername(e) {
      this.username = e.detail.value;
    },
    inputNickName(e) {
      this.nickName = e.detail.value;
    },
    inputPassword(e) {
      this.password = e.detail.value;
    },
    inputPassword2(e) {
      this.password2 = e.detail.value;
    },
    usernameBlur() {
      //console.log(1);
      this.request({
        url: this.apiServer + "/user/isExitUsername?username=" + this.username
      }).then(res => {
        console.log(res);
        this.error = res.msg;
        this.code = res.code;
        if (res.code == "0") {
          this.flag1 = true;
        } else {
          this.flag1 = false;
        }
      });
    },
    passwordBlur() {
      if (this.password === this.password2) {
        this.flag2 = true;
      } else {
        this.flag2 = false;
      }
    },
    clickRegister() {
      if (this.flag1 == true && this.flag2 == true) {
        this.password2 = md5Libs.md5(this.password2);
        this.request({
          url: this.apiServer + "/user/register",
          method: "POST",
          header: {
            "Content-Type": "application/x-www-form-urlencoded"
          },
          data: {
            username: this.username,
            password: this.password2,
            nickName: this.nickName
          }
        }).then(res => {
          if (res.code == "200") {
            uni.showToast({
              title: res.msg + ",正在为你跳转..",
              icon: "none",
              duration: 2000
            });
            var timer = setTimeout(function() {
              uni.redirectTo({
                url: "/pages/login/index"
              });
            }, 2 * 1000);
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none",
              duration: 2000
            });
          }
        });
      } else {
        //验证失败
        uni.showToast({
          title: "请确保你填写正确!",
          icon: "none",
          duration: 1000
        });
      }
    }
  }
};
</script>

<style>
page {
  height: 100%;
  width: 100%;
}
.error_wrap_red {
  color: red;
  display: flex;
  align-items: center;
  justify-content: center;
}
.error_wrap {
  color: aqua;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  box-sizing: border-box;
  background-color: #f2f2f2;
}

/*登录图片*/

.login-icon {
  flex: none;
}

.login-img {
  width: 100%;
}

/*表单内容*/

.login-from {
  margin-top: 22px;
  flex: auto;
  height: 100%;
}

.inputView {
  display: flex;
  flex-direction: row;
  padding-top: 10px;
  padding-bottom: 10px;
  align-items: center;
}

/*输入框*/

.nameImage,
.keyImage {
  margin-left: 20px;
  margin-top: 3px;
  margin-right: 5px;
  width: 14px;
  height: 14px;
}

.loginLab {
  color: #545454;
  font-size: 14px;
  width: 40px;
}

.inputText {
  margin-left: 15px;
  text-align: left;
  color: #ccc;
  font-size: 14px;
}

.line {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin-top: 1px;
}

/*按钮*/

.loginBtnView {
  width: 100%;
  height: auto;
  background-color: #f2f2f2;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

.loginBtn {
  width: 80%;
  margin-top: 35px;
}

.registerBtn {
  position: absolute;
  bottom: 1%;
  right: 1%;
  border: none !important;
  text-decoration: underline;
  color: blue !important;
}
.getBackPassBtn {
  position: absolute;
  bottom: 1%;
  left: 1%;
  border: none !important;
  text-decoration: underline;
  color: gray !important;
}
</style>